<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>运力配置 - 雁农冷链平台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- 所需样式 -->
	<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.capacity-container {
			padding: 20px;
		}
		.capacity-card {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
			padding: 20px;
		}
		.stats-card {
			text-align: center;
			padding: 20px;
			border-radius: 8px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			margin-bottom: 10px;
		}
		.vehicle-status-active {
			color: #67c23a;
			font-weight: bold;
		}
		.vehicle-status-maintenance {
			color: #e6a23c;
			font-weight: bold;
		}
		.vehicle-status-inactive {
			color: #f56c6c;
			font-weight: bold;
		}
		.driver-card {
			border: 1px solid #e4e7ed;
			border-radius: 6px;
			padding: 15px;
			margin-bottom: 15px;
			transition: all 0.3s;
		}
		.driver-card:hover {
			border-color: #409eff;
			box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
		}
		.capacity-chart {
			height: 400px;
			border-radius: 8px;
			width: 100%;
			background: #fff;
			border: 1px solid #e4e7ed;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="capacity-container">
			<h2 style="margin-bottom: 30px; color: #303133;">
				<i class="el-icon-setting"></i> 运力配置管理
			</h2>
			
			<!-- 运力统计 -->
			<div class="capacity-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-data-analysis"></i> 运力统计概览
				</h3>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="stats-card">
							<div style="font-size: 32px; font-weight: bold; margin-bottom: 10px;">{{capacityStats.totalVehicles}}</div>
							<div>总车辆数</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stats-card" style="background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);">
							<div style="font-size: 32px; font-weight: bold; margin-bottom: 10px;">{{capacityStats.activeVehicles}}</div>
							<div>可用车辆</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stats-card" style="background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);">
							<div style="font-size: 32px; font-weight: bold; margin-bottom: 10px;">{{capacityStats.totalDrivers}}</div>
							<div>司机总数</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stats-card" style="background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);">
							<div style="font-size: 32px; font-weight: bold; margin-bottom: 10px;">{{capacityStats.totalCapacity}}</div>
							<div>总载重(吨)</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 车辆管理 -->
			<div class="capacity-card">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h3 style="margin: 0; color: #409eff;">
						<i class="el-icon-truck"></i> 车辆管理
					</h3>
					<el-button type="primary" size="small" @click="showVehicleDialog = true">
						<i class="el-icon-plus"></i> 添加车辆
					</el-button>
				</div>
				
				<el-table :data="vehicles" style="width: 100%">
					<el-table-column prop="plateNumber" label="车牌号" width="120"></el-table-column>
					<el-table-column prop="vehicleType" label="车型" width="120"></el-table-column>
					<el-table-column prop="capacity" label="载重(吨)" width="100"></el-table-column>
					<el-table-column prop="volume" label="容积(m³)" width="100"></el-table-column>
					<el-table-column prop="tempRange" label="温度范围" width="120"></el-table-column>
					<el-table-column prop="driver" label="司机" width="100"></el-table-column>
					<el-table-column prop="status" label="状态" width="100">
						<template slot-scope="scope">
							<span :class="getVehicleStatusClass(scope.row.status)">{{scope.row.statusText}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="lastMaintenance" label="上次保养" width="120"></el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button size="mini" @click="editVehicle(scope.row)">编辑</el-button>
							<el-button size="mini" type="warning" @click="maintenanceVehicle(scope.row)">保养</el-button>
							<el-button size="mini" type="danger" @click="deleteVehicle(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			
			<!-- 司机管理 -->
			<div class="capacity-card">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h3 style="margin: 0; color: #409eff;">
						<i class="el-icon-user"></i> 司机管理
					</h3>
					<el-button type="primary" size="small" @click="showDriverDialog = true">
						<i class="el-icon-plus"></i> 添加司机
					</el-button>
				</div>
				
				<el-row :gutter="20">
					<el-col :span="8" v-for="driver in drivers" :key="driver.id">
						<div class="driver-card">
							<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
								<h4 style="margin: 0;">{{driver.name}}</h4>
								<el-tag :type="driver.available ? 'success' : 'warning'">{{driver.available ? '空闲' : '忙碌'}}</el-tag>
							</div>
							<div style="margin-bottom: 8px;">
								<span style="color: #909399;">电话：</span>{{driver.phone}}
							</div>
							<div style="margin-bottom: 8px;">
								<span style="color: #909399;">驾龄：</span>{{driver.experience}}年
							</div>
							<div style="margin-bottom: 8px;">
								<span style="color: #909399;">驾照类型：</span>{{driver.licenseType}}
							</div>
							<div style="margin-bottom: 15px;">
								<span style="color: #909399;">当前车辆：</span>{{driver.currentVehicle || '未分配'}}
							</div>
							<div>
								<el-button size="mini" @click="editDriver(driver)">编辑</el-button>
								<el-button size="mini" type="primary" @click="assignVehicle(driver)">分配车辆</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 运力分析 -->
			<div class="capacity-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-pie-chart"></i> 运力分析
				</h3>
				<el-row :gutter="20">
					<el-col :span="16">
						<div class="capacity-chart">
						<div id="capacityChart" style="width: 100%; height: 100%;"></div>
					</div>
					</el-col>
					<el-col :span="8">
						<div style="margin-bottom: 20px;">
							<h4>运力优化建议</h4>
							<el-timeline>
								<el-timeline-item timestamp="建议1" color="#0bbd87">
									增加2辆中型冷藏车，提升运力30%
								</el-timeline-item>
								<el-timeline-item timestamp="建议2" color="#e4e7ed">
									优化司机排班，减少空闲时间
								</el-timeline-item>
								<el-timeline-item timestamp="建议3" color="#f56c6c">
									3辆车辆需要进行定期保养检查
								</el-timeline-item>
							</el-timeline>
						</div>
						<div style="background: #f0f9ff; padding: 15px; border-radius: 8px; border-left: 4px solid #409eff;">
							<div style="font-weight: bold; color: #409eff; margin-bottom: 10px;">
								<i class="el-icon-warning"></i> 运力预警
							</div>
							<div style="font-size: 14px; color: #606266;">当前运力使用率达到85%，建议增加运力资源</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		
		<!-- 添加车辆对话框 -->
		<el-dialog title="添加车辆" :visible.sync="showVehicleDialog" width="600px">
			<el-form :model="vehicleForm" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="车牌号">
							<el-input v-model="vehicleForm.plateNumber" placeholder="请输入车牌号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="车型">
							<el-select v-model="vehicleForm.vehicleType" placeholder="请选择车型">
								<el-option label="小型冷藏车" value="small"></el-option>
								<el-option label="中型冷藏车" value="medium"></el-option>
								<el-option label="大型冷藏车" value="large"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="载重(吨)">
							<el-input-number v-model="vehicleForm.capacity" :min="0" :precision="1"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="容积(m³)">
							<el-input-number v-model="vehicleForm.volume" :min="0" :precision="1"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="温度范围">
					<el-input v-model="vehicleForm.tempRange" placeholder="如：-18°C ~ 8°C"></el-input>
				</el-form-item>
				<el-form-item label="购买日期">
					<el-date-picker v-model="vehicleForm.purchaseDate" type="date" placeholder="选择购买日期"></el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showVehicleDialog = false">取消</el-button>
				<el-button type="primary" @click="saveVehicle">保存</el-button>
			</div>
		</el-dialog>
		
		<!-- 添加司机对话框 -->
		<el-dialog title="添加司机" :visible.sync="showDriverDialog" width="500px">
			<el-form :model="driverForm" label-width="100px">
				<el-form-item label="姓名">
					<el-input v-model="driverForm.name" placeholder="请输入司机姓名"></el-input>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="driverForm.phone" placeholder="请输入联系电话"></el-input>
				</el-form-item>
				<el-form-item label="驾龄(年)">
					<el-input-number v-model="driverForm.experience" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="驾照类型">
					<el-select v-model="driverForm.licenseType" placeholder="请选择驾照类型">
						<el-option label="A1" value="A1"></el-option>
						<el-option label="A2" value="A2"></el-option>
						<el-option label="B1" value="B1"></el-option>
						<el-option label="B2" value="B2"></el-option>
						<el-option label="C1" value="C1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="身份证号">
					<el-input v-model="driverForm.idCard" placeholder="请输入身份证号"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showDriverDialog = false">取消</el-button>
				<el-button type="primary" @click="saveDriver">保存</el-button>
			</div>
		</el-dialog>
	</div>
	
	<!-- 所需js -->
	<script src="../../static/kj/echarts-en.min.js"></script>
	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/kj/element-ui/index.js"></script>
	<script src="../../static/sa.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			mounted() {
				this.initCapacityChart();
			},
			data: {
				capacityStats: {
					totalVehicles: 15,
					activeVehicles: 12,
					totalDrivers: 18,
					totalCapacity: 125.5
				},
				vehicles: [
					{
						id: 1,
						plateNumber: '京A12345',
						vehicleType: '中型冷藏车',
						capacity: 8.5,
						volume: 35,
						tempRange: '-18°C ~ 8°C',
						driver: '张师傅',
						status: 'active',
						statusText: '正常',
						lastMaintenance: '2024-01-05'
					},
					{
						id: 2,
						plateNumber: '京B67890',
						vehicleType: '大型冷藏车',
						capacity: 12.0,
						volume: 50,
						tempRange: '-25°C ~ 10°C',
						driver: '李师傅',
						status: 'maintenance',
						statusText: '保养中',
						lastMaintenance: '2024-01-08'
					},
					{
						id: 3,
						plateNumber: '京C11111',
						vehicleType: '小型冷藏车',
						capacity: 3.5,
						volume: 15,
						tempRange: '-10°C ~ 5°C',
						driver: '王师傅',
						status: 'active',
						statusText: '正常',
						lastMaintenance: '2023-12-20'
					}
				],
				drivers: [
					{
						id: 1,
						name: '张师傅',
						phone: '13800138001',
						experience: 8,
						licenseType: 'A2',
						available: false,
						currentVehicle: '京A12345'
					},
					{
						id: 2,
						name: '李师傅',
						phone: '13800138002',
						experience: 12,
						licenseType: 'A1',
						available: false,
						currentVehicle: '京B67890'
					},
					{
						id: 3,
						name: '王师傅',
						phone: '13800138003',
						experience: 5,
						licenseType: 'B2',
						available: true,
						currentVehicle: null
					},
					{
						id: 4,
						name: '赵师傅',
						phone: '13800138004',
						experience: 15,
						licenseType: 'A2',
						available: true,
						currentVehicle: null
					}
				],
				showVehicleDialog: false,
				showDriverDialog: false,
				vehicleForm: {
					plateNumber: '',
					vehicleType: '',
					capacity: 0,
					volume: 0,
					tempRange: '',
					purchaseDate: ''
				},
				driverForm: {
					name: '',
					phone: '',
					experience: 0,
					licenseType: '',
					idCard: ''
				}
			},
			methods: {
				getVehicleStatusClass(status) {
					const classMap = {
						'active': 'vehicle-status-active',
						'maintenance': 'vehicle-status-maintenance',
						'inactive': 'vehicle-status-inactive'
					};
					return classMap[status] || '';
				},
				editVehicle(vehicle) {
					this.$message.info('编辑车辆：' + vehicle.plateNumber);
					console.log('编辑车辆：', vehicle);
				},
				maintenanceVehicle(vehicle) {
					this.$confirm('确定要将车辆送去保养吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message.success('车辆已安排保养');
					});
				},
				deleteVehicle(vehicle) {
					this.$confirm('确定要删除这辆车吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message.success('车辆删除成功');
					});
				},
				editDriver(driver) {
					this.$message.info('编辑司机：' + driver.name);
					console.log('编辑司机：', driver);
				},
				assignVehicle(driver) {
					this.$message.info('为司机分配车辆：' + driver.name);
					console.log('分配车辆：', driver);
				},
				saveVehicle() {
					if (!this.vehicleForm.plateNumber || !this.vehicleForm.vehicleType) {
						this.$message.warning('请填写完整的车辆信息');
						return;
					}
					
					this.$message.success('车辆添加成功');
					console.log('新增车辆：', this.vehicleForm);
					
					// 重置表单
					this.vehicleForm = {
						plateNumber: '',
						vehicleType: '',
						capacity: 0,
						volume: 0,
						tempRange: '',
						purchaseDate: ''
					};
					this.showVehicleDialog = false;
				},
				saveDriver() {
					if (!this.driverForm.name || !this.driverForm.phone) {
						this.$message.warning('请填写完整的司机信息');
						return;
					}
					
					this.$message.success('司机添加成功');
					console.log('新增司机：', this.driverForm);
					
					// 重置表单
					this.driverForm = {
						name: '',
						phone: '',
						experience: 0,
						licenseType: '',
						idCard: ''
					};
					this.showDriverDialog = false;
				},
				initCapacityChart() {
					const chart = echarts.init(document.getElementById('capacityChart'));
					
					const option = {
						title: {
							text: '运力利用率分析',
							left: 'center',
							textStyle: {
								fontSize: 16,
								color: '#303133'
							}
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross'
							}
						},
						legend: {
							data: ['车辆利用率', '司机工作时长', '运输效率'],
							top: '10%'
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							top: '20%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
						},
						yAxis: [
							{
								type: 'value',
								name: '利用率(%)',
								position: 'left',
								max: 100,
								axisLabel: {
									formatter: '{value}%'
								}
							},
							{
								type: 'value',
								name: '工作时长(小时)',
								position: 'right',
								max: 12,
								axisLabel: {
									formatter: '{value}h'
								}
							}
						],
						series: [
							{
								name: '车辆利用率',
								type: 'line',
								yAxisIndex: 0,
								data: [75, 82, 88, 79, 85, 91, 87],
								lineStyle: {
									color: '#409eff'
								},
								itemStyle: {
									color: '#409eff'
								},
								areaStyle: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0, color: 'rgba(64, 158, 255, 0.3)'
										}, {
											offset: 1, color: 'rgba(64, 158, 255, 0.1)'
										}]
									}
								}
							},
							{
								name: '司机工作时长',
								type: 'line',
								yAxisIndex: 1,
								data: [8.5, 9.2, 9.8, 8.7, 9.5, 10.2, 9.8],
								lineStyle: {
									color: '#67c23a'
								},
								itemStyle: {
									color: '#67c23a'
								}
							},
							{
								name: '运输效率',
								type: 'bar',
								yAxisIndex: 0,
								data: [72, 78, 85, 76, 82, 89, 84],
								itemStyle: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0, color: '#e6a23c'
										}, {
											offset: 1, color: '#f56c6c'
										}]
									}
								}
							}
						]
					};
					
					chart.setOption(option);
					
					// 响应式调整
					window.addEventListener('resize', () => {
						chart.resize();
					});
				}
			}
		});
	</script>
</body>
</html>